<template>
  <wing-blank>
    <div class="HomeCollectionProductList">
      <div class="HomeCollectionProductsTitle">{{ title }}</div>
      <white-space/>
      <van-image radius="9px" :src="bannerImage" @click.stop="handleBannerTo"/>
      <white-space/>
      <van-grid class="HomeCollectionProductListGrid" :column-num="3">
        <van-grid-item v-for="product in products" :key="product.id" style="width: 33%">
          <home-collection-product-list-item :product="product"/>
        </van-grid-item>
      </van-grid>
    </div>
  </wing-blank>
</template>

<script>
import WingBlank from "@/components/WingBlank"
import { Grid, GridItem, Image } from "vant"
import WhiteSpace from "@/components/WhiteSpace"
import HomeCollectionProductListItem from "@/views/home/HomeCollectionProductListItem"
import { catalog } from "@mall/api-services"

export default {
  name: "HomeCollectionProductList",
  components: {
    HomeCollectionProductListItem,
    WhiteSpace,
    WingBlank,
    [Grid.name]: Grid,
    [GridItem.name]: GridItem,
    [Image.name]: Image,
  },
  props: {
    title: String,
    bannerImage: String,
    bannerTo: String,
    limit: Number,
    name: String,
  },
  data() {
    return {
      loading: false,
      finished: false,
      page: 1,
      nextPage: 1,
      totalPages: 1,
      products: [],
    }
  },
  created() {
    this.refreshProducts()
  },
  methods: {
    refreshProducts() {
      this.products = []
      this.load()
    },
    load() {
      const { storeId, collections, sort, name, inventoryStatuses, limit } = this
      this.loading = true
      catalog.ProductServiceV1
          .getProducts()
          .page(1).limit(limit)
          .storeId(storeId)
          .name(name)
          .statuses(catalog.ProductStatus.Active)
          .inventoryStatuses(inventoryStatuses)
          .collections(collections)
          .sort(sort)
          .list()
          .then(pageProducts => {
            this.products.push(...pageProducts.elements)
          })
    },
    handleBannerTo() {
      const { bannerTo } = this
      if (bannerTo) {
        this.$router.push(bannerTo)
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.HomeCollectionProductList {
  .HomeCollectionProductsTitle {
    font-size: 18px;
  }

  .HomeCollectionProductListGrid {
    ::v-deep .van-grid-item__content {
      //padding: initial;
      padding: 0 0 8px 0;
    }
  }
}
</style>
